<template>
  <view class="app-container">

	<!-- <view class="container"> -->
		<!--    <u-navbar :back-icon-color="'#EAEAE3'" back-text="返回" :is-fixed="false" title="商品详情"-->
		<!--      :back-text-style="{color:'#EAEAE3'}" :background="{}" title-color="#EAEAE3" :border-bottom="false">-->
		<!--    </u-navbar>-->
		<!--    <u-swiper :list="product.skuImages" height="720" name="imgUrl"></u-swiper>-->
		
		<!-- <view class="back_pages" :style="'position: fixed; left: 30rpx; top:'+ titleHeight +'rpx;'" @click="backPage">
			<u-icon size="35" name="arrow-leftward"></u-icon>
		</view> -->
		<view class="image-swipper-title" :style="{background: (product.spuInfo && product.spuInfo.spuAddType == 1)?'#D1FFDF':'#FFFFFF'}">
			<u-swiper :autoplay="false" :list="product.skuImages" height="750" name="imgUrl" @click="showimg"></u-swiper>
		</view>
		<view class="top-area">
			<!-- 限时活动 -->
			<view class="time-limit-box" v-if="product.spuInfo && product.spuInfo.spuAddType == 1">
				<view class="left-alarm-clock" style="background: #55DE80;">
					<view class="alarm-content">
						<view class="">
							<image src="../../../static/image/alarm-clock.png" style="width: 72rpx; height: 72rpx; margin-top: 14rpx; margin-left: 10rpx;"></image>
						</view>
						<view style="display: flex; flex-direction: column;">
							<view  style="margin-top: 20rpx; color: #FFFFFF; font-size: 42rpx; font-weight: bolder; font-family: cursive; font-style:oblique;">
								限时团购
							</view>
							<view style="display: flex; flex-direction: row; align-items: center;" >
								<view style="width: 180rpx; height: 6rpx;">
									<ai-progress  :percentage="(transitionNum(skuNumber.yetNum,skuNumber.groupNum) * 100).toFixed(2)" :textInside="false" strokeWidth="6" isAnimate="true" duration="3000" bgColor="#FFFFFF" inBgColor="#92F8B5"></ai-progress>
								</view>
								<view class="plan-text" v-if="skuNumber.yetNum >= skuNumber.groupNum">
									<!-- 已抢{{(transitionNum(skuNumber.yetNum,skuNumber.groupNum) * 100).toFixed(2)}}% -->
									已成团，继续拼
								</view>
								<view class="plan-text" v-if="skuNumber.yetNum < skuNumber.groupNum">
									未成团，继续拼
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="count-down-right" style="background: #92F8B5;">
					<view style="font-size: 28rpx;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #009B65;line-height: 40rpx;">
						— 距结束 —
					</view>
					<view class="">
						<uni-countdown v-if="showDown" ref='countdown' :font-size="12" color="#FFFFFF" splitorColor="#009B65" background-color="#009B65" border-color="#009B65" :showDay="true"
						:day="countDateTime.countDay"  :hour="countDateTime.countHour" :minute="countDateTime.countDown" :second="countDateTime.secondTime" @timeup="timeout"></uni-countdown>
					</view>
				</view>
			</view>
			
			<view class="header-title-box" :style="{paddingTop: product.spuInfo.spuAddType == 1 ? '24rpx' : ''}">
				<view style="font-size: 32rpx;margin-left: 30rpx; margin-right: 30rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #111111;">
					{{ product.skuTitle }}
				</view>

				<!-- 单规格商品 -->
				<view class="introduce-section">
					<text class="title">{{product.productName}}</text>
					<view class="price-box">
						<view style="display: flex; flex-direction: column;">
							<view style="font-size: 28rpx; color: chocolate; font-weight: 400;" v-if="product.spuInfo && product.spuInfo.isActivityStatus == '1'">
								折后价
							</view>
							<view style="display: flex; flex-direction: row;">
								<text class="price" style="font-weight: 500;">¥{{product.price}}</text>						
								<text class="m-price" v-if="product.price != product.linePrice">{{product.linePrice}}</text>
								<!-- <text class="coupon-tip" v-if="product.spuInfo && product.spuInfo.isActivityStatus == '1'">{{(product.price / product.linePrice * 100).toFixed(0)}}折</text> -->
							</view>
						</view>
						
						<view  class="countdown-body-box" v-if="false">
							<!-- <view  class="countdown-body-box" v-if="product.spuInfo.isActivityStatus == '1'"> -->
							<span style="color: #000000; font-size: 32rpx; margin-right: 5rpx;">距结束</span>
							<uni-countdown ref='countdown' :font-size="13" color="#FFFFFF" background-color="#000000" border-color="#909399" :showDay="true"
							:day="countDateTime.countDay"  :hour="countDateTime.countHour" :minute="countDateTime.countDown" :second="countDateTime.secondTime" @timeup="timeout"></uni-countdown>
						</view>
					</view>
					<!-- <text class="rebate-text">返利：¥{{product.skuRebate == null || product.skuRebate == ''?'0.00':product.skuRebate}}</text> -->
					<view class="bot-row">
						<text style="flex: 2;">已售： {{product.saleCount}}</text>
						<text style="flex: 5;">库存： {{product.inventory}}</text>
						<!-- <u-icon size="32" name="share" @click="togglePopup('bottom', 'share')"></u-icon> -->
						<button class="share-small-btn" open-type="share">
							<view style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
								<image mode="aspectFit" src="../../../static/image/share-black.png" class="icon"></image>
								<view style="font-size: 28rpx; color: #909399; line-height: 36rpx;">
									分享
								</view>
							</view>
							
						</button>
					</view>
				</view>
				<!--  领券 -->
				<view class="coupon-section" @click="showCoupon = true" v-if="coupons.length > 0">
					<view>
						<u-button type="error" style="margin-right:10px;height:20px;line-height: 20px;" size="mini">领券
						</u-button>
					</view>
					<view v-for="(item,index) in coupons" v-if="index<3">
						<u-button type="error" style="margin-right:5px;height:20px;line-height: 20px;" plain size="mini">
							<text v-if="item.conditionAmount>0">满{{item.conditionAmount}}</text>
							<text v-else>立</text>
							<text v-if="item.type=='CASH'">减{{item.benefitCash}}</text>
							<text v-if="item.type=='DISCOUNT'">享{{item.benefitDiscount/10}}折</text>
						</u-button>
					</view>
				
					<view class="coupon-btn">
						<text class="yticon icon-you"></text>
					</view>
				</view>
				<view class="c-list">
					<!-- <view class="c-row" style="padding-top: 0;font-size: 32rpx;color: #000000;font-weight: bold;">
						{{ product.skuTitle }}
					</view> -->
					<view v-if="product.skuSubtitle" class="c-row" style="padding-top: 0;font-size: 24rpx;color: #545454;">
						{{ product.skuSubtitle? product.skuSubtitle:'' }}
					</view>
				
					<view class="c-row b-b" v-if="product.saleAttrValue != null" @click="toggleSpec">
						<text class="tit">选择</text>
						<view class="right-content">
							<view class="con" v-if="product.saleAttrValue.attrValue">{{ product.saleAttrValue.attrValue }}</view>
							<view class="con" style="color: #999;font-size: 28rpx;" v-else>选择商品规格</view>
							<text class="yticon icon-you"></text>
						</view>
					</view>
					<!-- <view class="c-row b-b" v-else>
						<text class="tit">购买数量</text>
						<view class="con">
							<u-number-box :min="1" :max="product.inventory" :value="buyNum"></u-number-box>
						</view>
						<text class="yticon icon-you"></text>
					</view> -->
					<view v-if="product.skuType == 1" class="c-row b-b" style="display: flex;justify-content: space-between;align-items: center;">
						<view class="c-cell">
							<view class="c-label">发货：</view>
							<view class="c-content">{{ product.shop.receiveLocation }}</view>
						</view>
						<view class="c-cell">
							<view class="c-label">快递：</view>
							<view class="c-content">{{ product.spuInfo.isFreePostage == '0'?'不包邮':'包邮' }}</view>
						</view>
					</view>
					<view v-if="product.skuType == 2" class="c-column b-b">
						<view class="bz-list con">
							服务状态：<u-tag style="margin-left: 10rpx;" :text="product.shop.onlineStatus == '1'?'营业中':'暂停营业'" :type="product.shop.onlineStatus == '1'?'success':'error'"  size="mini" shape="circle"></u-tag> 
						</view>
						<view class="bz-list con">服务类型：{{product.skuServiceType == 1?'到店服务':(product.skuServiceType == 2?'配送':'配送或到店')}}</view>
						<view class="bz-list con">
							店铺地址：{{ product.shop.address }}
						</view>
					</view>
					<view v-if="product.spuAttrValues && product.spuAttrValues.length > 0" class="c-row b-b"
						@click="togglePopup('bottom', 'attr')">
						<text class="tit"选择</text>
						<view class="con">
							{{product.spuAttrValues[0].value[0].attrName}} -
							{{product.spuAttrValues[0].value[0].attrValue}} ...
						</view>
						<text class="yticon icon-you"></text>
					</view>
					<!-- <view class="c-row b-b">
						<text class="tit">活动</text>
						<view class="bz-list con">
						  <text>
							<text style="color: #F50F02;">积分</text>最高抵扣
							<text style="color: #F50F02;margin: 0 10rpx 0 5rpx;">￥{{ '10.00' }}</text>购买赠送
							<text style="color: #F50F02;">100%</text>积分
						  </text>
						</view>
					  </view> -->
					<!-- <view class="c-row b-b">
						<text class="tit">服务</text>
						<view class="bz-list con">
						  <text>7天无理由退换货</text>
						</view>
					</view> -->
				</view>
			</view>
			
		</view>
				
		<!-- 领优惠券弹出框 -->
		<u-popup v-model="showCoupon" mode="bottom" :closeable="true" border-radius="14" width="100%" height="800">
			<view class="coupon-title">领优惠券</view>
			<view class="coupon-list">
				<view class="coupon-list-item" v-for="(item,index) in coupons" :key="index">
					<u-row>
						<u-col span="4">
							<view class="coupon-left">
								<view class="c1">
									<text class="amount" v-if="item.type=='CASH'">{{item.benefitCash}}</text>
									<text class="discount"
										v-if="item.type=='DISCOUNT'">{{item.benefitDiscount/10}}</text>
								</view>
								<view class="c2">
									<text v-if="item.conditionAmount>0"> 满{{item.conditionAmount}}元可用</text>
									<text v-else> 无门槛</text>
								</view>
							</view>
						</u-col>
						<u-col span="8" class="coupon-right">
							<view class="c1">
								<text v-if="item.benefitType=='0'">全场通用</text>
								<text v-if="item.benefitType=='1'">指定商品</text>
							</view>
							<view class="c2">
								<text v-if="item.validType==1"> 有效期至{{item.endDate}}</text>
								<text v-if="item.validType==2"> 领取后{{item.validDays}}天内有效</text>
							</view>
							<view class="c3">
								<u-button plain size="mini " type="error" @click="getCoupon(item)">立即领取</u-button>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</u-popup>

		

		<!-- 评价 -->
		<view v-if="false" class="eva-section">
			<view class="e-header">
				<text class="tit">评价</text>
				<text>({{totalComment}})</text>
				<text class="tip" @click="navTo('/pages/product/evaluate?id='+id)">查看全部</text>
				<text class="yticon icon-you"></text>
			</view>
			<view class="" v-for="(comment,index) in commentList" :key="index" v-if="totalComment > 0">
				<view class="eva-box">
					<image class="portrait" :src="comment.userDTO.photoUrl||'/static/missing-face.png'"
						mode="aspectFill"></image>
					<view class="right">
						<view class="bot">
							<text class="attr">{{comment.userDTO.name}}</text>
							<text class="time">{{comment.evaluateTime}}</text>
						</view>
						<view class="star">
							<image src="/static/temp/redstar.png" mode="" v-if="i<comment.commentRank"
								v-for="(item,i) in stars">
							</image>
						</view>
						<text class="con">{{comment.commentContent||''}}</text>
					</view>
				</view>
				<view class="eva-image">
					<image @click="previewImage(url)" :src="url" mode="aspectFill" v-for="(url,index) in comment.imageUrlList" :key="index">
					</image>
				</view>
				<view class="eva-reply" v-if="comment.replayContent">
					<text>卖家回复: {{comment.replayContent}}</text>
				</view>
			</view>
		</view>

		<view class="store-box" v-if="product.shop">
			<image class="portrait" src="/static/image/store.png" mode="aspectFill"></image>
			<view class="right">
				<view class="bot">
					<text class="attr">{{product.shop.shopName}}</text>					
				</view>				
				<view class="desc">
					<u-icon name="star-fill" color="#FC9F2A" size="30"></u-icon>
					<text style="margin-left: 5rpx;">{{ '4.5' }}</text>
				</view>
			</view>
			<view class="action" @click="navTo('/pages/sys/home/store?id=' + product.shopId)">进去逛逛</view>
		</view>

		<view class="detail-desc">
			<view class="d-header">
				<view class="dotted d-1"></view>
				<text>商品详情</text>
				<view class="dotted d-2"></view>
			</view>
			<view class="detail-content" v-if="product.spuInfoDesc">
				<u-parse class="showInfoText" :html="product.spuInfoDesc.decript"></u-parse>
			</view>
		</view>

		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<!-- <navigator :url="'/pages/sys/home/store?id=' + product.shopId" open-type="navigate" class="p-b-btn">
				<image src="/static/image/store.png" style="width: 32rpx;height: 32rpx;"></image>
				<text>店铺</text>
			</navigator> -->
			<view class="p-b-btn" :style="{'margin-left': product.spuInfo.spuAddType != 0?'80rpx':''}">
				<button open-type="contact" class="transBtn"></button>
				<image src="/static/image/contact.png" style="width: 40rpx;height: 40rpx;"></image>
				<text>客服</text>
			</view>
			<navigator v-if="product.skuType == 1 && product.spuInfo.spuAddType == 0" url="/pages/sys/shopCart/index" open-type="switchTab" class="p-b-btn" style="position: relative;">
				<image src="/static/image/cart.png" style="width: 40rpx;height: 40rpx;"></image>
				<text>购物车</text>
				<u-badge bgColor="#F50F02" :count="cartNum" :offset="[-10, 0]"></u-badge>
			</navigator>
			<view class="p-b-btn" @click="toFavorite">
				<image src="/static/image/collected.png" mode="aspectFit" style="width: 40rpx;height: 40rpx;" v-if="isCollected"></image>
				<image src="/static/image/collect.png" mode="aspectFit" style="width: 40rpx;height: 40rpx;" v-else></image>
				<text>{{isCollected ? '已收藏' : '收藏'}}</text>
			</view>

			<view class="action-btn-group" :style="{'justify-content': product.spuInfo.spuAddType != 0?'center':''}">
				<span v-if="product.spuInfo.spuAddType == 0">
					<button :disabled="product.skuType == 2" type="primary" class=" action-btn no-border add-cart-btn" @click="toggleSpec"
						v-if="product.saleAttrValue != null && product.saleAttrValues.length > 0 ">加入购物车</button>
					<button :disabled="product.skuType == 2" v-else type="primary" class=" action-btn no-border add-cart-btn" @click="addCart" >加入购物车</button>
				</span>
				<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">立即购买</button>
			</view>
		</view>


		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" v-if="product.saleAttrValue != null && product.saleAttrValues.length > 0"
			:class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image :src="product.skuDefaultImg || '../../../static/logo.png'" mode="aspectFit"></image>
					<view class="right">
						<view class="spec-title">{{product.skuName}}</view>
						<text class="price">¥{{product.price}}</text>
						<text class="stock other_data">库存：{{product.inventory}}</text>
						<view class="selected other_data">已选： {{product.saleAttrValue.attrValue}}</view>
					</view>
				</view>
				<view class="attr-list" v-for="(item,index) in product.saleAttrValues" :key="index">
					<view class="attr-title">{{ item.key }}</view>
					<view class="attr-item-list">
						<view v-for="(child,ids) in item.value" :key="ids" @click="selectAttrValue(child)" class="attr-item">
							<text class="item-text"
								:class="{selected: child.skuId === product.skuId}">{{ child.attrValue }}</text>
						</view>
					</view>
				</view>
				<view class="a-t" style="margin: 0 0 20rpx 10rpx;display: flex;align-items: center;">
					<view style="width: 130rpx;">购买数量</view>
					<view style="width: 90%;text-align: right;">
						<u-number-box :min="1" :max="999" :value="buyNum"></u-number-box>
					</view>
				</view>
				<view class="action-btn-group">
					<button type="primary" class=" action-btn no-border add-cart-btn" @click="addCart">加入购物车</button>
					<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">立即购买</button>
				</view>
			</view>
		</view>
		<!-- 底部商品参数弹窗 -->
		<uni-popup ref="showattr" :type="type">;
			<view class="spu-attr">
				<view v-for="(item, i) in product.spuAttrValues" :key="i">
					<view class="group-name">{{ item.key }}</view>
					<view v-for="(child, j) in item.value" :key="j" class="attr-row" v-if="item.value.length > 1"
						:class="{'bottom-row': (i == product.spuAttrValues.length - 1) && (j == item.value.length - 1)}">
						<view class="row-left">{{ child.attrName }}</view>
						<view class="row-right">{{ child.attrValue }}</view>
					</view>
					<view class="attr-row" v-else :class="{'bottom-row': (i == product.spuAttrValues.length - 1)}">
						{{ item.value[0].attrValue }}
					</view>
				</view>
			</view>
			<button class="close-btn" @click="closeAttr">关闭</button>
		</uni-popup>
		
		<!-- 悬浮分享弹框 -->
		<!-- <view class="" @click.stop="shareCoupon(skuId, product.skuSwiperImg)">
			<button class="sharing-btn" open-type="share">
				<drag-button
					:isDock="true"
					:existTabBar="false"
					/>
				分享
			</button>
		</view> -->
		
		
		<photoswipe ref="prImgs" :imgs.sync="ImageList"></photoswipe>
		<!-- 查看图片  放大缩小 -->
		<!-- <view class="pop-mask-box" @touchmove.stop.prevent="moveHandle" v-show="showImageStatus" @click.stop="showImageStatus = false">
			<view style="width: 100vw; z-index: 999;">
				<movable-area style="width: 100vw; height: 35vh; margin-top: 10rpx;">
					<movable-view @change="onChange" out-of-bounds="false" :x="x" :y="y" direction="all"
						style="width: 100vw; height: 100%;" scale="true" scale-value="1" scale-max="5" scale-min="1">
						<image style="width: 100%;" :src="showImageUrl" mode="aspectFit" ></image>
					</movable-view>
				</movable-area>
			</view>
		</view> -->
	</view>
</template>

<script>
	import dragButton from "@/components/drag-button/drag-button.vue";
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import AiProgress from "@/components/ai-progress/ai-progress.vue"
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniPopup,
			dragButton,
			AiProgress
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		data() {
			return {
				x: 0,
				y: 0,
				old: {
					x: 0,
					y: 0
				},
				countDateTime: {
					countDay: 0,
					countHour: 0,
					countDown: 0,
					secondTime: 10,
				},
				skuNumber: {},
				showDown: true,
				showImageStatus: false,
				ImageList: [],
				titleHeight: '',
				skuId: '',
				unit: 1,
				showCoupon: false,
				coupons: [],
				product: {
					skuImages: [{}],
					productMainImage: {},
					spuAttrValues: [],
					shop: {},
					saleAttrValue: {},
					saleAttrValues: []
				},
				// 购买数量
				buyNum: 1,
				// 购物车商品种类数量
				cartNum: 0,
				// 是否收藏商品
				isCollected: false,
				specClass: 'none',
				type: '',
				// 评论列表
				commentList: [],
				// 总评论数
				totalComment: 0,
				// 评论的用户评分
				stars: [0, 0, 0, 0, 0]
			};
		},
		onLoad(options) {
			this.getPhoneHeightStatus()
			this.skuId = options.id;
			this.getSkuInfo();
			// 已抢多少
			if (this.hasLogin) {
				// 检查商品是否被收藏
				this.checkCollected(this.skuId);
				// 获取购物车商品数量
				this.inquiryCartNum();
			}
		},
		onShow() {
			this.getSkuInfo();
		},
		onShareAppMessage(res) {
			return this.shareCoupon(this.skuId, this.product.skuSwiperImg, this.product.spuInfo.spuAddType)
		},
		onShareTimeline(res) {
			return this.shareTimeLine(this.skuId, this.product.skuName, this.product.skuDefaultImg)
		},
		methods: {
			...mapMutations(['login', 'addFootPrint']),
			
			// 分享到朋友圈
			shareTimeLine(skuId, skuName, skuDefaultImg){
				this.skuId = skuId
				this.product.skuName = skuName
				this.product.skuDefaultImg = skuDefaultImg
				return {
					title: skuName,
					imageUrl: skuDefaultImg,
					query: 'id='+skuId 
				}
			},
			// 去分享到朋友及微信群
			shareCoupon(skuId, skuSwiperImg, spuAddType) {
				this.skuId = skuId
				this.product.skuSwiperImg = skuSwiperImg
				this.product.spuInfo.spuAddType = spuAddType
				console.log(skuId);
				return {
					title: spuAddType == '1'?'优品拼团':(spuAddType == '0'?'OJ原聚酒小二商城':'闪送'),
					imageUrl: skuSwiperImg,
					path: '/pages/sys/home/product?id=' + skuId
				}
			},
			
			transitionNum(startNum, endNum){
				let number = startNum / endNum
				return number > 1?1:number
			},
			
			// 倒计时到点触发
			timeout(){
				const that =this
				// 1、禁用按钮
				console.log("倒计时结束");
				// 2、显示弹窗
				uni.showModal({
					title: '温馨提示',
					content: '本次活动已结束，敬请等待下次促销活动',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.navigateBack({
								delta: 1
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			
			onChange: function(e) {
				this.old.x = e.detail.x
				this.old.y = e.detail.y
			},

			// 获取导航栏的高度
			/**
			 * 获取手机状态栏高度
			 */
			getPhoneHeightStatus() {
				let systemInfo = uni.getSystemInfoSync();
				let pxToRpxScale = 750 / systemInfo.windowWidth; //px转换到rpx的比例
				let fontSize = systemInfo.fontSizeSetting * pxToRpxScale; // 用户设置的字体大小
				let statuHeight = systemInfo.statusBarHeight * pxToRpxScale; //状态栏的高度
				let titleHeight = 25 * pxToRpxScale; //导航栏高度，这个一般是固定的
				// console.log(titleHeight);
				this.titleHeight = titleHeight
			},
			// 返回上一级页面
			backPage() {
				uni.navigateBack({
					delta: 1
				})
			},


			togglePopup(type, open) {
				switch (type) {
					case 'top':
						this.content = '顶部弹出 popup'
						break

					case 'bottom':
						this.content = '底部弹出 popup'
						break
					case 'center':
						this.content = '居中弹出 popup'
						break
				}
				this.type = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			closeAttr() {
				this.$refs.showattr.close();
			},
			// 是否已收藏商品
			checkCollected(skuId) {
				this.$api.request.skuIsCollected({
					skuId: skuId
				}, res => this.isCollected = res.data);
			},
			// 查询购物车商品数量
			inquiryCartNum() {
				try {
					this.$api.request.getCartNum(res => this.cartNum = res.data);
				} catch (e) {
					console.log(e);
				}
			},
			getSkuInfo() {
				try {
					this.$api.request.skuDetail({
						id: this.skuId
					}, res => {
						this.product = res.data
						// 商品处于活动中，查询活动结束倒计时
						if(res.data.spuInfo.isActivityStatus == '1'){
							that.$api.request.getSpuCountDown({
								actId: res.data.spuInfo.actId
							}, rs => {
								if(rs.code == 200){
									that.countDateTime = rs.data
								}
							})
						}
						// 商品是否处于拼团中，查询拼团结束倒计时
						if(res.data.spuInfo.spuAddType == 1){
							// 已经抢购了多少
							this.getSkuNumInfo(res.data.skuId)
							// 活动倒计时
							this.$api.request.getGroupCountDown({
								skuId: res.data.skuId
							}, rs => {
								if(rs.code == 200){
									this.countDateTime = rs.data
								}
							})
						}
					});
				} catch (e) {
					console.log(e);
				}
			},
			// 获取商品已抢进度
			getSkuNumInfo(skuId){
				this.$api.request.getSkuNumInfo({
					skuId: skuId
				}, resp => {
					if(resp.code == 200){
						this.skuNumber = resp.data
					}
				})
			},
			// 查询商品评论
			searchProductComment(id) {
				let postData = {
					keyArray: ['PRODUCTUUID'],
					productUuid: id,
					startIndex: 0,
					pageSize: 1
				}
				this.$api.request.goodsComment(postData, res => {
					if (res.body.status.statusCode === '0') {
						this.commentList = res.body.data.commentList;
						this.totalComment = res.body.data.total;
					} else {
						console.log(res.body.status.errorDesc);
					}
				});
			},
			//规格弹窗开关
			toggleSpec() {
				if (this.specClass === 'show') {
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.specClass = 'show';
				}
			},
			//选择规格
			selectAttrValue(attrValue) {
				if (this.skuId != attrValue) {
					console.log(attrValue.skuId);
					this.skuId = attrValue.skuId
					this.getSkuInfo();
					// this.navTo('/pages/sys/home/product?id=' + attrValue.skuId);
				}
			},
			numberChange(e) {
				this.unit = e.number;
			},
			// 登录
			goLogin(){
				
				uni.navigateTo({
					url: '/pages/sys/common/login'
				})
			},
			//分享
			// share() {
			//   this.$refs.share.toggleMask();
			// },
			// 收藏（取消收藏）商品
			toFavorite() {
				const that = this
				if(!this.hasLogin){
					this.goLogin()
					// uni.getUserProfile({
					// 	desc: "获取你的昵称、头像、地区及性别",
					// 	success: (res) => {
					// 		console.log(res);
					// 		uni.showLoading({
					// 			//title: '加载中'
					// 		});
					// 		this.$api.request.userLoginOrAdd({
					// 			encryptedData: res.encryptedData,
					// 			iv: res.iv,
					// 			sessionKey: this.session_key,
					// 			wechatId: uni.getStorageSync('openId'),
					// 			sourceType: "APP",
					// 			nickName: res.userInfo.nickName,
					// 			avatarUrl: res.userInfo.avatarUrl
					// 		}, resp => {							
					// 			console.log(resp);
					// 			uni.hideLoading();
					// 			if (resp.code == 200) {
					// 				this.$store.commit("setToken", resp.data.tokenValue)
					// 				this.$store.commit("login", resp.data);
					// 				uni.setStorageSync('authStatus', true)
					// 				this.$api.request.userInfo({},res => {
					// 					if(res.code == 200){
					// 						uni.setStorageSync('userInfo', res.data)
					// 						this.$api.request.skuCollect({
					// 							skuId: this.skuId,
					// 							spuId: this.product.spuId,
					// 							spuName: this.product.spuInfo.spuName,
					// 							spuImage: this.product.skuDefaultImg,
					// 							price: this.product.price
					// 						}, res => {
					// 							this.$u.toast(res.message);
					// 						})
					// 						this.isCollected = !this.isCollected;
					// 					}
					// 				})								
									
					// 			}
					// 		})
					// 	}
					// })
				}else{
					this.$api.request.skuCollect({
						skuId: this.skuId,
						spuId: this.product.spuId,
						spuName: this.product.spuInfo.spuName,
						spuImage: this.product.skuDefaultImg,
						price: this.product.price
					}, res => {
						this.$u.toast(res.message);
					})
					this.isCollected = !this.isCollected;
				}
				
			},
			// 立即购买
			buy() {
				if(!this.hasLogin){
					this.goLogin()
					// uni.getUserProfile({
					// 	desc: "获取你的昵称、头像、地区及性别",
					// 	success: (res) => {
					// 		console.log(res);
					// 		uni.showLoading({
					// 			//title: '加载中'
					// 		});
					// 		this.$api.request.userLoginOrAdd({
					// 			encryptedData: res.encryptedData,
					// 			iv: res.iv,
					// 			sessionKey: this.session_key,
					// 			wechatId: uni.getStorageSync('openId'),
					// 			sourceType: "APP",
					// 			nickName: res.userInfo.nickName,
					// 			avatarUrl: res.userInfo.avatarUrl
					// 		}, resp => {							
					// 			console.log(resp);
					// 			uni.hideLoading();
					// 			if (resp.code == 200) {
					// 				this.$store.commit("setToken", resp.data.tokenValue)
					// 				this.$store.commit("login", resp.data);
					// 				uni.setStorageSync('authStatus', true)
					// 				this.$api.request.userInfo({},res => {
					// 					if(res.code == 200){
					// 						uni.setStorageSync('userInfo', res.data)
					// 						// 如果库存等于0
					// 						if(this.product.inventory == 0){
					// 							uni.showModal({
					// 								title: '温馨提示',
					// 								content: '库存不足，无法购买',
					// 								showCancel: false,
					// 								success:res => {
					// 									// 点击拨打电话
					// 									if(res.confirm){
															
					// 									}
					// 								}
					// 							})
					// 						}else {
					// 							if(this.product.skuType == 1){
					// 								let sku = {
					// 									skuData: this.product,
					// 									buyNum: this.buyNum
					// 								};
					// 								uni.setStorageSync("placeOrder", JSON.stringify(sku));
					// 								this.navTo("/pages/sys/shopCart/placeOrder");
					// 							}else {
					// 								// 判断是否为上门服务
					// 								if(this.product.skuServiceType == 2 && this.product.inventory == 0){
					// 									uni.showModal({
					// 										title: '温馨提示',
					// 										content: '手艺人忙碌中，与店家咨询相应问题,  可拨打：13518543037 ',
					// 										confirmText: '联系店家',
					// 										cancelText: '我再想想',
					// 										success:res => {
					// 											// 点击拨打电话
					// 											if(res.confirm){
					// 												uni.makePhoneCall({
					// 													phoneNumber: "13518543037"
					// 												})
					// 											}
					// 										}
					// 									})
					// 								}else{
					// 									this.$api.request.getShopOnlineStatus({
					// 										shopId: this.product.shop.id
					// 									}, result => {
					// 										if(result.code == 200){
					// 											if(result.data.onlineStatus == '1'){
					// 												uni.navigateTo({
					// 													url: '/pagesA/appointment/service/reserve?id=' + this.product.skuId
					// 												})
					// 											}else {
					// 												uni.showToast({
					// 													title: '暂停营业中，不可预约服务',
					// 													icon: 'none'
					// 												})
					// 											}
					// 										}
					// 									})
														
					// 								}
					// 							}
					// 						}
					// 					}
					// 				})								
									
					// 			}
					// 		})
					// 	},
					// })
				}else{
					// uni.showModal({
					// 	title: '温馨提示',
					// 	content: '下单请联系店家',
					// 	showCancel: false,
					// 	success:res => {
					// 		if(res.confirm){
								
					// 		}
					// 	}
					// })
					// return false;
					if(this.product.inventory <= 0){
						uni.showModal({
							title: '温馨提示',
							content: '库存不足，无法购买',
							showCancel: false,
							success:res => {
								// 点击拨打电话
								if(res.confirm){
									
								}
							}
						})
					}else {
						let sku = {
							skuData: this.product,
							buyNum: this.buyNum
						};
						uni.setStorageSync("placeOrder", JSON.stringify(sku));
						this.navTo("/pages/sys/shopCart/placeOrder");
						
						
						
						// if(this.product.skuType == 1){
						// 	let sku = {
						// 		skuData: this.product,
						// 		buyNum: this.buyNum
						// 	};
						// 	uni.setStorageSync("placeOrder", JSON.stringify(sku));
						// 	this.navTo("/pages/sys/shopCart/placeOrder");
						// }else {
						// 	// 判断是否为上门服务
						// 	if(this.product.skuServiceType == 2 && this.product.inventory == 0){
						// 		uni.showModal({
						// 			title: '温馨提示',
						// 			content: '手艺人忙碌中，与店家咨询相应问题,  可拨打：13518543037 ',
						// 			confirmText: '联系店家',
						// 			cancelText: '我再想想',
						// 			success:res => {
						// 				// 点击拨打电话
						// 				if(res.confirm){
						// 					uni.makePhoneCall({
						// 						phoneNumber: "13518543037"
						// 					})
						// 				}
						// 			}
						// 		})
						// 	}else{
						// 		this.$api.request.getShopOnlineStatus({
						// 			shopId: this.product.shop.id
						// 		}, result => {
						// 			if(result.code == 200){
						// 				if(result.data.onlineStatus == '1'){
						// 					uni.navigateTo({
						// 						url: '/pagesA/appointment/service/reserve?id=' + this.product.skuId
						// 					})
						// 				}else {
						// 					uni.showToast({
						// 						title: '该店铺暂停营业中，不可预约服务',
						// 						icon: 'none'
						// 					})
						// 				}
						// 			}
						// 		})
						// 	}
						// }
					}
					
				}
				
			},
			// 添加商品到购物车
			addCart() {
				// 判断库存
				if(this.product.inventory > 0 && this.product.spuAddType != 1){
					if(!this.hasLogin){
						this.goLogin()
						// uni.getUserProfile({
						// 	desc: "获取你的昵称、头像、地区及性别",
						// 	success: (res) => {
						// 		console.log(res);
						// 		uni.showLoading({
						// 			//title: '加载中'
						// 		});
						// 		this.$api.request.userLoginOrAdd({
						// 			encryptedData: res.encryptedData,
						// 			iv: res.iv,
						// 			sessionKey: this.session_key,
						// 			wechatId: uni.getStorageSync('openId'),
						// 			sourceType: "APP",
						// 			nickName: res.userInfo.nickName,
						// 			avatarUrl: res.userInfo.avatarUrl
						// 		}, resp => {							
						// 			console.log(resp);
						// 			uni.hideLoading();
						// 			if (resp.code == 200) {
						// 				this.$store.commit("setToken", resp.data.tokenValue)
						// 				this.$store.commit("login", resp.data);
						// 				uni.setStorageSync('authStatus', true)
						// 				this.$api.request.userInfo({},res => {
						// 					if(res.code == 200){
						// 						uni.setStorageSync('userInfo', res.data)
						// 						// 组装销售属性
						// 						let attr = [];
						// 						for (var i = 0; i < this.product.saleAttrValues.length; i++) {
						// 							for (var j = 0; j < this.product.saleAttrValues[i].value.length; j++) {
						// 								let item = this.product.saleAttrValues[i].value[j];
						// 								if (this.skuId == item.skuId) {
						// 									attr.push({
						// 										key: this.product.saleAttrValues[i].key,
						// 										value: item.attrValue
						// 									});
						// 									break;
						// 								}
						// 							}
						// 						}
						// 						this.$api.request.addShopCart({
						// 							quantity: this.buyNum,
						// 							shopId: this.product.shopId,
						// 							productSpuId: this.product.spuId,
						// 							productSkuId: this.product.skuId,
						// 							price: this.product.price,
						// 							productPic: this.product.skuDefaultImg,
						// 							productName: this.product.skuName,
						// 							productSubTitle: this.product.skuSubtitle,
						// 							productCategoryId: this.product.catalogId,
						// 							productBrand: this.product.brandName,
						// 							productAttr: JSON.stringify(attr)
						// 						}, res => {
						// 							this.$u.toast("添加成功");
						// 							this.inquiryCartNum();
						// 							this.toggleSpec();
						// 						})
						// 					}
						// 				})								
										
						// 			}
						// 		})
						// 	},
						// })
					}else{
						// 组装销售属性
						let attr = [];
						for (var i = 0; i < this.product.saleAttrValues.length; i++) {
							for (var j = 0; j < this.product.saleAttrValues[i].value.length; j++) {
								let item = this.product.saleAttrValues[i].value[j];
								if (this.skuId == item.skuId) {
									attr.push({
										key: this.product.saleAttrValues[i].key,
										value: item.attrValue
									});
									break;
								}
							}
						}
						this.$api.request.addShopCart({
							quantity: this.buyNum,
							shopId: this.product.shopId,
							productSpuId: this.product.spuId,
							productSkuId: this.product.skuId,
							price: this.product.price,
							productPic: this.product.skuDefaultImg,
							productName: this.product.skuName,
							productSubTitle: this.product.skuSubtitle,
							productCategoryId: this.product.catalogId,
							productBrand: this.product.brandName,
							productAttr: JSON.stringify(attr)
						}, res => {
							this.$u.toast("添加成功");
							this.inquiryCartNum();
							this.toggleSpec();
						})
					}	
				}else{
						uni.showModal({
							title: '温馨提示',
							content: '库存不足，无法收藏',
							showCancel: false,
							success:res => {
								// 点击拨打电话
								if(res.confirm){
									
								}
							}
						})
					}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			previewImage(url) {
				var urls = [];
				urls.push(url);
				uni.previewImage({
					current: url,
					indicator: "number",
					loop: "true",
					urls: urls
				})
			},
			//搜索优惠券
			searchCoupon() {
				let postData = {
					keyArray: ['ACTIVE', 'PRODUCT', 'MERCHANT'],
					productUuid: this.id,
					merchantUuid: this.product.merchantDTO.merchantUuid,
					active: true,
					startIndex: 0,
					pageSize: 100
				};
				this.$api.request.couponList(postData, res => {
					if (res.body.status.statusCode === '0') {
						var coupons = res.body.data.coupons;
						this.coupons = coupons
					}
				}, true);
			},
			//领取优惠券
			getCoupon(item) {
				this.$api.request.getCoupon({
					actionType: 'RECEIVE',
					couponDTO: {
						couponUuid: item.couponUuid,
					},
					userDTO: {
						userUuid: this.userInfo.userUuid
					},
					receiveChannel: 'SELF'
				}, res => {
					if (res.body.status.statusCode === '0') {
						this.$api.msg('领取成功');
					} else {
						this.$api.msg(res.body.status.errorDesc);
					}
				}, false);
			},
			stopPrevent() {},
			// 查看图片
			showimg(index){
				console.log(this.product.skuImages[index].imgUrl);
				// 预览图片
				let urls = [this.product.skuImages[index].imgUrl]
				uni.previewImage({
					urls: urls,
					longPressActions: {
						itemList: [ '保存图片'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		},

	}
</script>

<style lang='scss' scoped>
	page {
		background: $page-gery;
	}
	.app-container{
		min-height: 100vh;
		background: $page-gery;
		padding-bottom: calc(160rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
	}
	.icon-you {
		font-size: $font-base + 2upx;
		color: #888;
	}

	/* 标题简介 */
	.introduce-section {
		background: #fff;
		margin: 0 24rpx;
		border-bottom: 1rpx solid #EBECF0;
		.title {
			font-size: 32rpx;
			color: $font-color-dark;
			height: 50rpx;
			line-height: 50rpx;
		}
		
		.price-box {
			display: flex;
			align-items: center;
			padding: 10rpx 0;
			font-size: 24rpx;
			color: #BFBFBF;

			.price {
				font-size: 36rpx;
				font-weight: bold;
				color: #009B65;
			}

			.m-price {
				margin: 0 12rpx;
				text-decoration: line-through;
				padding-top: 10rpx;
			}
		}

		.bot-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: $font-color-light;
			padding-bottom: 34rpx;
			border-bottom: 1rpx solid #EBECF0;
			padding-top: 14rpx;
			&:last-child{
				border-bottom: none;
			}
		}
	}

	/* 领券 */
	.coupon-section {
		display: flex;
		align-items: center;
		color: $font-color-base;
		padding: 12rpx 30rpx;

		.coupon-btn {
			flex: 1;
			text-align: right;
			font-size: $font-sm;
			color: $uni-color-primary;

			.icon-you {
				margin-left: 4rpx;
			}
		}
	}

	.coupon-title {
		text-align: center;
		padding: 30rpx 0;
		color: $font-color-dark;
	}

	/* 列表 */
	.coupon-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 10rpx;
		border-radius: 20rpx;

		.coupon-list-item {
			width: 100%;
			height: 110rpx;
			margin: 10rpx 0;
			background-image: url('/static/image/coupon_bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			border-radius: 5rpx;

			.coupon-left {
				text-align: center;
				color: #fff;

				.c1 {
					height: 80rpx;
					line-height: 80rpx;

					.amount {
						font-size: 100rpx;
						font-weight: 900;

						&:before {
							content: '￥';
							font-size: $font-lg;
						}
					}

					.discount {
						font-size: 100rpx;
						font-weight: 900;

						&:after {
							content: '折';
							font-size: $font-lg;
						}
					}
				}

				.c2 {
					font-size: $font-sm;
				}
			}

			.coupon-right {
				color: #fff;
				text-align: center;

				.c1 {
					padding-top: 20rpx;
				}

				.c2 {
					padding-top: 10rpx;
					font-size: $font-sm;
				}

				.c3 {
					padding-top: 30rpx;
				}
			}
		}
	}

	.c-list {
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;
		.c-row {
			display: flex;
			align-items: center;
			padding: 16rpx 0;
			margin: 0 24rpx;
			position: relative;
			.c-cell{
				flex: 1;
				overflow: hidden;
				display: flex;
				align-items: center;
				.c-label{
					width: 80rpx;
				}
			}
			.right-content{
				flex: 1;
				overflow: hidden;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.con{
					text-align: right;
				}
				.yticon{
					margin-top: 8rpx;
					margin-left: 12rpx;
				}
			}
		}
		.b-b:after{
			border-bottom: 1rpx solid #EBECF0 !important;
		}
		.c-column{
			display: flex;
			flex-direction: column;
			padding: 16rpx 30rpx;
			position: relative;
		}

		.tit {
			width: 135rpx;
		}

		.con {
			flex: 1;
			color: $font-color-dark;

			.selected-text {
				margin-right: 10rpx;
			}
		}

		.action {
			flex: 1;
			color: $font-color-dark;

			.selected-text {
				margin-right: 10rpx;
			}

			text-align: right;
		}

		.bz-list {
			//height: 40rpx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;

			text {
				display: inline-block;
			}
		}

		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40rpx;
		}

		.red {
			color: $uni-color-primary;
		}
	}

	/* 评价 */
	.eva-section {
		display: flex;
		flex-direction: column;
		padding: 20rpx 30rpx;
		background: #fff;
		margin-top: 16rpx;

		.e-header {
			display: flex;
			align-items: center;
			height: 70rpx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.tit {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				margin-right: 4rpx;
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.icon-you {
				margin-left: 10rpx;
			}
		}
	}

	.store-box {
		display: flex;
		margin: 20rpx 0;
		padding: 20rpx 40rpx;
		background: #fff;
		border-radius: 24rpx;
		.portrait {
			flex-shrink: 0;
			width: 90rpx;
			height: 90rpx;
			border-radius: 100px;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26rpx;
			.con {
				font-size: $font-base;
				color: $font-color-dark;
				padding: 20rpx 0;
			}

			.bot {
				display: flex;
				justify-content: space-between;
				font-size: $font-lg;
				color: $font-color-base;
			}

			.desc {
				margin-top: 10rpx;
				font-size: $font-sm;
				color: $font-color-light;
			}
		}

		.action {
			font-size: 12px;
			padding: 0 10px;
			margin: 5px 0;
			border-radius: 5px;
			background-color: #539A8B;
			color: #EAEAE3;
			height: 30px;
			line-height: 30px;
		}
	}

	.eva-box {
		display: flex;
		padding: 20rpx 0;

		.portrait {
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
			border-radius: 100px;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26rpx;

			.star {
				display: flex;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.con {
				font-size: $font-base;
				color: $font-color-dark;
				padding: 20rpx 0;
			}

			.bot {
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
	}

	.eva-image {
		display: flex;

		image {
			width: 160rpx;
			height: 160rpx;
			margin-right: 20rpx;
		}
	}

	.eva-reply {
		background-color: #F8F8F8;
		color: $font-color-light;
		font-size: 28rpx;
		padding: 10rpx;
		margin: 20rpx 0;
		border-radius: 20rpx;
	}

	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 16rpx;
		border-radius: 24rpx 24rpx 0 0;
		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			font-size: $font-base;
			color: #111111;
			position: relative;

			text {
				padding: 0 20rpx;
				background: #fff;
				position: relative;
				z-index: 1;
			}
			.dotted{
				width: 28rpx;
				position: relative;
				&:before,&:after{
					content: "";
					position: absolute;
					background: #009B65;
					border-radius: 50%;
					top: 0;
					bottom: 0;
				}
				&:before{
					left: 0;
				}
				&:after{
					right: 0;
				}
			}
			.d-1{
				&:before{
					width: 8rpx;
					height: 8rpx;
				}
				&:after{
					top: -1rpx;
					width: 12rpx;
					height: 12rpx;
				}
			}
			.d-2{
				&:before{
					top: -1rpx;
					width: 12rpx;
					height: 12rpx;
				}
				&:after{
					width: 8rpx;
					height: 8rpx;
				}
			}
			/* &:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300rpx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			} */
		}
		.detail-content{
			padding: 0 24rpx;
		}
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 42rpx 34rpx calc(20rpx + constant(safe-area-inset-bottom));
		padding: 42rpx 34rpx calc(20rpx + env(safe-area-inset-bottom));
		.a-t {
			display: flex;

			image {
				width: 200rpx;
				height: 200rpx;
				flex-shrink: 0;
				border-radius: 16rpx;
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding-left: 20rpx;
				.spec-title{
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.price {
					font-size: 30rpx;
					color: #009B65;
					margin-top: 10rpx;
				}
				.other_data{
					font-size: 26rpx;
					margin-top: 10rpx;
				}
			}
		}

		.attr-list {
			max-height: 700rpx;
			font-size: 28rpx;
			color: #111111;
			padding-top: 30rpx;
			margin-bottom: 32rpx;
			border-bottom: 1rpx solid #EBECF0;
			.attr-title {
				margin-bottom: 15rpx;
			}
			.attr-item-list{
				max-height: 600rpx;
				overflow-y: scroll;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 24rpx;
			}
			.attr-item {
				margin-bottom: 40rpx;
				margin-right: 16rpx;
				.item-text {
					padding: 8rpx 30rpx;
					border-radius: 8rpx;
					background: #F7F8FA;
				}
			}

			.selected {
				color: #539A8B;
				/* font-weight: bold; */
				/* border: 4rpx #539A8B solid !important; */
				background: rgba(#009B65, .1) !important;
			}
		}

		.action-btn-group {
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			position: relative;
			&:after {
				content: '';
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28rpx;
				width: 0;
			}

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 320rpx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 46rpx;
				background: transparent;
				font-size: 32rpx;
				margin: 0;
			}
			.add-cart-btn{
				background: linear-gradient(328deg, #F8D340 0%, #F6A912 100%);
			}
			.buy-now-btn{
				background: linear-gradient(328deg, #03D289 0%, #009B65 100%);
			}
		}
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 60rpx 60rpx 0 0;
			background-color: #fff;

			.btn {
				height: 66rpx;
				line-height: 66rpx;
				border-radius: 100rpx;
				background: $uni-color-primary;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30rpx auto 20rpx;
			}

			.disabled {
				background-color: $font-color-disabled;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 95;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.13);
		padding-bottom: constant(safe-area-inset-bottom); 
		padding-bottom: env(safe-area-inset-bottom);
		.uni-badge {
			position: absolute;
			top: -0.1em;
			left: 7em;
			background: $uni-color-error;
			color: #fff;
		}

		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 18rpx;
			color: #111111;
			/* width: 96rpx; */
			margin-right: 34rpx;
			height: 80rpx;
			position: relative;
			.yticon {
				font-size: 40rpx;
				line-height: 48rpx;
				color: $font-color-light;
			}
			text{
				margin-top: 8rpx;
			}
			&.active,
			&.active .yticon {
				color: $uni-color-primary;
			}

			.icon-fenxiang2 {
				font-size: 42rpx;
				transform: translateY(-2rpx);
			}

			.icon-shoucang {
				font-size: 46rpx;
			}
			.transBtn{
				position: absolute;
				opacity: 0;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 10;
				border-radius: 0;
			}
		}

		.action-btn-group {
			display: flex;
			height: 64rpx;
			position: relative;
			flex: 1;
			overflow: hidden;
			justify-content: flex-end;
			&:after {
				content: '';
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28rpx;
				width: 0;
				/* border-right: 1px solid rgba(255, 255, 255, .5); */
			}

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 220rpx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 32rpx;
				background: transparent;
				font-size: 28rpx;
				margin-left: 16rpx;
				margin-right: 0;
			}
			.add-cart-btn{
				background: linear-gradient(328deg, #F8D340 0%, #F6A912 100%);
			}
			.buy-now-btn{
				background: linear-gradient(328deg, #03D289 0%, #009B65 100%);
			}
		}

	}

	.spu-attr {
		font-size: 26rpx;
		border-radius: 15rpx;
		background-color: #FFFFFF;
		padding: 20rpx 20rpx 120rpx;

		.group-name,
		.attr-row {
			width: 100%;
			padding: 0 10rpx;
			min-height: 60rpx;
			line-height: 60rpx;
			border: 1rpx #000000 solid;
			border-bottom: 0;
		}

		.group-name {
			font-weight: bold;
		}

		.attr-row {
			display: flex;

			.row-left {
				flex: 3;
				padding-right: 10rpx;
				border-right: 1rpx #000000 solid;
			}

			.row-right {
				flex: 8;
				padding-left: 10rpx;
			}
		}

		.bottom-row {
			border-bottom: 1rpx #000000 solid;
		}
	}

	.close-btn {
		position: fixed;
		z-index: 95;
		left: 30rpx;
		right: 30rpx;
		bottom: 16rpx;
		display: flex;
		width: 690rpx;
		height: 80rpx;
		color: #EAEAE3;
		font-size: 32rpx;
		align-items: center;
		border-radius: 30rpx;
		justify-content: center;
		background-color: #539A8B;
		box-shadow: 1px 2px 5px rgba(83, 154, 139, 0.4);
	}

	.back_pages {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background: rgba(0, 0, 0, 0.4);
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99999;
	}
	
	.showInfoText{
		/* text-indent: 2em; */
		color: #000000;
		::v-deep image{
			max-width: 100% !important;
		}
	}
	
	.pop-mask-box{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,1);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99;
	}
	
	.ql-align-center {
		text-align: center !important;
	}
	
	.ql-syntax{
		color: black;
		text-indent: 0em;
		font-weight: bold;
	}
	
	rich-text {
		padding: 0 30rpx;
	}
	
	.sharing-btn {
		color: #FFFFFF;
		background: none;
		border: none;
	}
	
	.sharing-btn::after{
		display: none;
	}
	
	.countdown-body-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: auto;
		margin-right: 0;
	}
	
	.rebate-text{
		font-size: 24rpx;
		color: #E83030;
	}
	
	.image-swipper-title{
		width: 100vw;
		padding: 24rpx 24rpx 48rpx;
	}
	
	.time-limit-box{
		width: 100vw;
		height: 112rpx;
		display: flex;
		flex-direction: row;
		background: #D1FFDF;
		border-radius: 24rpx 24rpx 0 0;
		overflow: hidden;
		.left-alarm-clock{
			width: 57%;
			height: 112rpx;
			
			position: relative;
			.alarm-content{
				position: relative;
				z-index: 2;
				display: flex;
				flex-direction: row;
				::v-deep .progress-container{
					box-shadow: 0 5rpx 10rpx 0 rgba(0,0,0,.3);
				}
			}
			&::after{
				content: "";
				position: absolute;
				z-index: 0;
				right: -69rpx;
				top: 0;
				bottom: 0;
				border-top: 112rpx solid #55DE80;
				border-right: 112rpx solid transparent;
				transform: rotate(-32deg);
			}
		}
		
		.count-down-right{
			width: 43%;
			height: 112rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}
	
	.plan-text{
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 34rpx;
	}
	.header-title-box{
		background: #fff;
		border-radius: 0 0 24rpx 24rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
	}
	.top-area{
		margin-top: -24rpx;
	}
	.share-small-btn{
		/* width: 36rpx;
		height: 36rpx; */
		padding: 0;
		margin: 0;
		border: none;
		border-radius: none;
		background: transparent;
		&::after{
			content: "";
			border-radius: none;
			border: none;
		}
		.icon{
			width: 36rpx;
			height: 36rpx;
			display: block;
		}
	}
	.b-b:last-child{
		&::after{
			border: none;
		}
	}
</style>
